<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <link rel="stylesheet" type="text/css" href="../style/learn.css">
</head>
<body>
<article>
    <p>伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。
        它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护</p>
    <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
        melon azuki bean garlic.</p>

    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
        greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

    <p>用户行为伪类：:hover-鼠标悬浮 :focus-键盘点击时间</p>
    <p><a href="">Hover over me</a></p>

    <p>伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的 HTML
        元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::</p>
    <p>例如，如果你想选中一段的第一行，你可以把它用一个span元素包起来，然后使用元素选择器；
        不过，如果包起来的单词/字符数目长于或者短于父元素的宽度，这样做会失败。
        由于我们一般不会知道一行能放下多少单词/字符——因为屏幕宽度或者字体大小改变的时候这也会变——通过改变 HTML
        的方式来可预测地这么做是不可能的。</p>
    <div>
        <article>
            <p id="firstP">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi
                tomatillo
                melon azuki bean garlic.</p>

            <p id="secondP">Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean
                collard
                greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
        </article>
    </div>
</article>
</body>
</html>